<template>
<div>
  <div class="feedback">
    <textarea class="feedback-content" placeholder="输入反馈内容，不超过100字" v-model="form.content" maxlength="100" @input="bindWordLimit">
      </textarea>
    <span class="wordLimit">{{currentNoteLen}}/100</span>
  </div>
  <div class="zan-cell zan-field">
    <div class="btn" @click="submit">提交</div>
  </div>
</div>
</template>

<script>
import api from '@/utils/api'
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      form: {
        content: ''
      },
      desc: '',
      currentNoteLen: 0,
      content: ''
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  beforeMount() {
    console.log('beforeMount')
    if (!this.user || !this.user.id) {
      // 用户未授权
      let url = 'get_user_info?callback_url=feedback'
      wx.redirectTo({
        url: url
      })
      return
    }

    this.form.brand_id = this.user.brand_id
    this.form.user_id = this.user.id
  },
  components: {},
  methods: {
    //字数限制
    bindWordLimit: function() {
      this.currentNoteLen = this.form.content.length
    },
    showToask(title) {
      wx.showToast({
        title: title,
        icon: 'none'
      })
    },
    submit() {
      console.log(this.form.content)
      let self = this
      if (!self.form.content) {
        self.showToask('请输入反馈内容')
        return
      }

      api.saveFeedback(this.form).then(res=>{
        if (res.code === 0) {
          self.showToask("反馈成功")
          self.form.content = ''
          self.currentNoteLen=0
        } else {
          self.showToask(res)
        }
      })
    }
  },
  async created() {

  }
}
</script>

<style >
.feedback {
  border-bottom: 1px #EEEEE0 solid;
  padding: 10px;
  position: relative;
}

.feedback-content {
  width: 100%;
}

.btn {
  height: 40px;
  line-height: 40px;
  width: 80%;
  color: white;
  text-align: center;
  background: black;
  border-radius: 50px;
  margin: 5px auto;
}

.wordLimit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #B0B0B0;
}
</style>